<template>
	<view class="content">
		<nav-bar leftIcon="left" title="USDT"></nav-bar>
		<view>
			<view class="messageMain">
				<view style="margin-left: 10px;margin-top: 40rpx;" class="howMoney">
					<view class="moneyTitle">{{ $t('總資產') }}(USDT)</view>
					<view class="totalMoney">{{ MyFlowMoney.usdtAmount || 0 }}</view>
				</view>
			</view>
			<!-- 充值流传 -->
			<view class="actionMoney">
				<view class="moneyBox" @click="clickMyRecharge" style="margin-bottom: 15rpx;">
					<image src="../../assets/shop/qian.png" class="moneyImg"></image>
					<view class="moneyTextMain">
						<view class="moneyText">
							{{ $t('充值') }}
						</view>
						<view class="moneyTextMs">
							{{ $t('充值到當前賬戶') }}
						</view>
					</view>
				</view>
				<view class="moneyBox" @click="clickMyCirculation">
					<image src="../../assets/shop/liu.png" class="moneyImg"></image>
					<view class="moneyTextMain">
						<view class="moneyText">
							{{ $t('提現') }}
						</view>
						<view class="moneyTextMs">
							{{ $t('提現到指定賬戶') }}
						</view>
					</view>
				</view>
			</view>
			<!-- tab栏代码 -->
			<view style="margin: 15rpx 0 15rpx 0; ">
				<view style="position: sticky;top:3rem;z-index: 1;background-color: #18171e;" class="tab">
					<view class="scroll-view-item_H" v-for="(tab, index) in list.tabBars" :key="index" :id="tab.id">
						<view class="titleIcon" @click="checkIndex(index)">
							<view :class="{ activite: navIndex == index }">{{ $t(`${tab.name}`) }}</view>
							<image src="../../assets/shop/line.png" class="line" v-if="navIndex == index"></image>
						</view>
					</view>
				</view>
				<!-- 内容 -->
				<view v-if="navIndex == 0">
					<view class="contentList" v-for="(item, index) in RevenueList1" :key="index">
						<view class="iconTitle">
							<image src="../../assets/shop/money.png" class="icon"></image>
							<view style="font-size: 26rpx;">{{ $t('來源地址') }}:</view>
							<view style="margin-top: 8rpx;" class="contentName">
								{{ item.outAddress.substring(0, 6) }}......{{
									item.outAddress.substring(item.outAddress.length
										- 6, item.outAddress.length) }}
							</view>
							<image src="../../static/cope.png" style="width: 35rpx;height: 35rpx;display: block;"
								@click="copy(item.outAddress)" />
						</view>
						<view class="nameTimeMs"
							style="margin-left: 65rpx;display: flex;align-items: center;margin-left: 50rpx;">
							<view style="font-size: 25rpx; color: #fff;">{{ $t('訂單編號') }}:</view>
							<view class="cfpSize" style="color: #fff;margin-left: 35rpx;">{{ item.recordId }}</view>
						</view>
						<view class="moneyTimeMain">
							<view class="myMoney">
								<view class="numsAndTime">
									{{ item.amount }}USDT
								</view>
								<view class="nameTimeMs" v-if="navIndex == 0">
									{{ $t('收入金額') }}
								</view>
								<view class="nameTimeMs" v-if="navIndex == 1">
									{{ $t('轉出金額') }}
								</view>
							</view>
							<view class="myMoney">
								<view class="numsAndTime">
									{{ item.createTime }}
								</view>
								<view class="nameTimeMs">
									{{ $t('時間') }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="navIndex == 1">
					<view class="contentList" v-for="(item, index) in RevenueList2" :key="index">
						<view class="iconTitle">
							<image src="../../assets/shop/money.png" class="icon"></image>
							<view style="font-size: 25rpx; width: 120rpx;">{{ $t('提現地址') }}:</view>
							<view style="margin-top: 8rpx;" class="contentName">
								{{ item.usdtAddress.substring(0, 6) }}......{{
									item.usdtAddress.substring(item.usdtAddress.length
										- 6, item.usdtAddress.length) }}
							</view>
							<image src="../../static/cope.png" style="width: 35rpx;height: 35rpx;display: block;"
								@click="copy(item.usdtAddress)" />
							<view style="display: flex; justify-content: flex-end;flex: 1;font-size: 25rpx;">
								{{ $t(`${rechargeStatusType[item.orderStatus]}`) }}
							</view>
						</view>
						<view class="nameTimeMs"
							style="margin-left: 65rpx;display: flex;align-items: center;margin-left: 50rpx;">
							<view style="font-size: 25rpx; color: #fff;">{{ $t('訂單編號') }}:</view>
							<view class="cfpSize" style="color: #fff;margin-left: 35rpx;">{{ item.recordId }}</view>
						</view>
						<view class="moneyTimeMain">
							<view class="myMoney">
								<view class="numsAndTime">
									{{ item.amount }}USDT
								</view>
								<view class="nameTimeMs">
									{{ $t('提現金額') }}
								</view>
							</view>
							<view class="myMoney">
								<view class="numsAndTime">
									{{ item.createTime }}
								</view>
								<view class="nameTimeMs">
									{{ $t('時間') }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	onShow
} from "@dcloudio/uni-app"
import {
	ref,
	reactive,
	watch,
	nextTick
} from "vue";
import {
	onReachBottom
} from '@dcloudio/uni-app'
import {
	debounce
} from '@/utils/check.js'
import i18n from '@/locale/index'
import { axios } from '@/service/request.js'

const userId = ref('')
const page = ref({
	pageNum: 1,
	pageSize: 10
})
const rechargeStatusType = ref({
	0: '待審覈',
	1: '審覈通過',
	2: '不通過',
})
const total = ref(0)
async function getuserinfo() {
	const res = await uni.getStorage({
		key: 'setUserInfo'
	})
	userId.value = res.data.userId
	// getRevenueDetailsList()
	checkIndex(0)
}
const copy = (e) => {
	uni.setClipboardData({
		data: e,
		success: function () {
			uni.showToast({
				title: `${i18n.global.t('複製成功')}`,
				duration: 1000,
				icon: 'none',
			})
		}
	})
}
// getuserinfo()
onShow(async () => {
	RevenueList1.value = []
	RevenueList2.value = []
	let list = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	let moneyAmoutData = await axios('usdtInfo/getUsdtBalance', list)
	MyFlowMoney.value = moneyAmoutData

	getuserinfo()
})
const navIndex = ref(0)
const MyFlowMoney = ref({})
let list = reactive({
	tabBars: [{
		name: '充值記錄',
		id: 'shourumingxi'
	}, {
		name: '提現記錄',
		id: '提現記錄'
	}]
})
const checkIndex = (index) => {
	page.value.pageNum = 1
	page.value.pageSize = 10
	navIndex.value = Number(index)
	if (navIndex.value == 0) {
		getRevenueDetailsList(true)
	} else {
		getUserAroundFlowList(true)
	}
}
const tabChange = (e) => {
	const navIndexs = e.detail.current
	navIndex.value = navIndexs
}
const clickMyCirculation = () => {
	uni.navigateTo({
		url: "/pages/myCirculationUSDT/myCirculationUSDT",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const clickMyRecharge = () => {
	uni.navigateTo({
		url: "/pages/rechargeUSDT/rechargeUSDT",
		animationType: "fade-in",
		animationDuration: 200,
	});
}

//获取一天的收益
let dayEarnings = ref({
	dayIncomeAmount: 0,
	remainsTotalAmount: 0
})

//获取充值记录
let num = 0
let cancelRequest1 = false; // 取消标志位
let RevenueList1 = ref([])
const getRevenueDetailsList = async (val) => {
	if (cancelRequest1) {
		return; // 如果取消标志位为true，直接返回，不再发送请求
	}
	cancelRequest1 = true
	if (!userId) return
	setTimeout(() => {
		cancelRequest1 = false; // 2s后设置取消标志位为false
	}, 1000);
	if (val) {
		RevenueList1.value = []
	}
	const res = await axios('usdtInfo/getRechargeRecord', {
		userId: userId.value,
		...page.value
	})

	nextTick(() => {
		RevenueList1.value = RevenueList1.value.length ? [...RevenueList1.value, ...res.records] : [...
			res.records
		]
	})
	total.value = res.total
}

//获取提现记录
let RevenueList2 = ref([])
let cancelRequest2 = false; // 取消标志位
const getUserAroundFlowList = async (val) => {
	if (cancelRequest2) {
		return; // 如果取消标志位为true，直接返回，不再发送请求
	}
	cancelRequest2 = true
	if (!userId) return
	setTimeout(() => {
		cancelRequest2 = false; // 2s后设置取消标志位为true
	}, 1000);
	if (val) {
		RevenueList2.value = []
	}
	const res = await axios('usdtInfo/getWithdrawalRecord', {
		userId: userId.value,
		...page.value
	})
	nextTick(() => {
		RevenueList2.value = RevenueList2.value.length ? [...RevenueList2.value, ...res.records] : [...
			res.records
		]
	})
	total.value = res.total
}


//上拉加载更多
onReachBottom(() => {
	page.value.pageNum++
	if (navIndex.value === 0) {
		if (RevenueList1.value.length >= total.value) {
			return uni.showToast({
				title: `${i18n.global.t('没有更多了')}!`,
				icon: 'none',
			})
		}
		getRevenueDetailsList()
	} else {
		if (RevenueList2.value.length >= total.value) {
			return uni.showToast({
				title: `${i18n.global.t('没有更多了')}!`,
				icon: 'none',
			})
		}
		getUserAroundFlowList()
	}
})
</script>

<style scoped>
.cfpSize {
	/* 		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden; */
	display: block;
	font-size: 30rpx;
	width: 230rpx;
}

.nameTimeMs {
	color: #808492;
	font-size: 22rpx;
}

.numsAndTime {
	color: #FFFFFF;
	font-size: 28rpx;
}

.moneyTimeMain {
	margin-top: 35rpx;
	display: flex;
	justify-content: space-between;
}

.myMoney {
	width: 320rpx;
	text-align: left;
}

.contentName {
	width: 280rpx;
	line-height: 40rpx;
	color: #FFFFFF;
	font-size: 28rpx;
	margin-left: 20rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.iconTitle {
	display: flex;
	align-items: center;
}

.icon {
	width: 50rpx;
	height: 50rpx;
}

.titleIcon {
	text-align: center;
	height: 50rpx;
	margin-left: 35rpx;
}

.line {
	width: 30rpx;
	height: 10rpx;
	display: block;
	margin: 0 auto;
}

.activite {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 30rpx;
}

.scroll-view-item_H {
	display: inline-flex;
	align-items: center;
	color: #808492;
	font-size: 26rpx;
}

.contentList {
	background-color: #24232C;
	color: #fff;
	margin-top: 25px;
	padding: 15rpx;
}

.scroll-view_H {
	width: 100%;
	color: #CCCCCC;

}

.moneyTextMs {
	font-size: 22rpx;
	color: #808492;
}

.moneyText {
	font-weight: bold;
	color: #FFFFFF;
	font-size: 30rpx;
}

.moneyTextMain {
	margin-left: 20rpx;
}

.moneyBox {
	background-color: #24232C;
	border-radius: 8rpx;
	/* width: 280rpx; */
	padding: 25rpx;
	display: flex;
	align-items: center;
}

.actionMoney {
	margin-top: 30rpx;
	/* 		display: flex;
		align-items: center;
		justify-content: space-between; */
}

.moneyImg {
	width: 70rpx;
	height: 70rpx;
}

.box {
	padding: 30rpx;
}

.img {
	width: 100%;
}

.howMoney {
	text-align: left;
}

.moneyTitle {
	font-weight: 400;
	color: #12FFFA;
	line-height: 70rpx;
	font-size: 28rpx;
}

.totalMoney {
	font-weight: bold;
	color: #12FFFA;
	line-height: 60rpx;
	font-size: 55rpx;
}

.messageMain {
	width: 690rpx;
	height: 322rpx;
	box-sizing: border-box;
	background: url("@/assets/index/banner.png");
	background-size: 100% 100%;
	/* padding: 25rpx; */
	margin: 0 auto;
	padding: 25rpx;
}

.money {
	font-weight: bold;
	color: #12FFFA;
	font-size: 36rpx;
	text-align: center;
}

.moneyDescription {
	font-weight: 400;
	color: #12FFFA;
	line-height: 70rpx;
	font-size: 22rpx;
	text-align: center;
}

.dayMoneyUp {
	width: 320rpx;
}

.dayMoney {
	display: flex;
	align-items: center;
	margin-top: 20rpx;
}
</style>